<template>
  <div class="header">
    <h4 class="title">问卷列表</h4>
    <img class="picture" src="../../../assets/img.png" />
  </div>

  <a-list item-layout="horizontal" :data-source="data" :pagination="paginationProps">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta>
          <template #title>
            <p class="questiontitle">{{ item.title }}</p>
          </template>
          <template #avatar>
            <a-avatar src="../../../assets/img.png" />
          </template>
          <template #description>
            <p>问卷开始时间：{{ item.start_time.substring(0, 10) }}</p>
            <p>问卷结束时间：{{ item.end_time.substring(0, 10) }}</p>
            <p>问卷状态：{{ item.status }}</p>
          </template>
        </a-list-item-meta>
        <template #actions>
          <a-button @click="goEdit(item.id)" :disabled="item.count !== 0" type="link" size="small">修改</a-button>
          <a-popconfirm title="确定要删除该问卷?" ok-text="删除" cancel-text="取消" @confirm="onDelete(item.id)">
            <a-button v-show="role == '1'" type="link" size="small">删除</a-button>
          </a-popconfirm>
          <a-button v-show="role == '1'" @click="choosePushUsers(item.id)" type="link" size="small">推送</a-button>
        </template>
      </a-list-item>
    </template>
  </a-list>
  <ChooseUsers ref="openModal" @chosUser="postData" />
</template>
<script lang="ts">
import { defineComponent, Ref, ref, onMounted, inject } from 'vue'
import { message } from 'ant-design-vue'
import 'ant-design-vue/es/message/style/css'
import { useRouter } from 'vue-router'
import { get, detele, post } from '../../../utils/request/request'
import ChooseUsers from '../../../components/chooseuser.vue'

interface DataItem {
  key: string
  id: number
  title: string
  start_time: string
  end_time: string
  status: number | string
  count: number
  create_by: string
  create_time: string
}
const data: Ref<DataItem[]> = ref([])

// 网络请求
const useHttpEffect = (chosId: Ref<number | undefined>) => {
  const reload: any = inject('reload')
  const token: string = localStorage.getItem('token') as string
  // 分页配置
  const paginationProps = ref({
    current: 1,
    pageSize: 5,
    total: 20,
    showSizeChanger: true,
    pageSizeOptions: ['5', '10', '15', '20'],
    // showQuickJumper: true,
    showTotal: (total: string) => `共${total}张问卷`,
    onChange: (current: number, pageSize: number) => changePage(current, pageSize),
    onShowSizeChange: (current: number, pageSize: number) => changePage(current, pageSize)
  })
  const onDelete = async (id: Ref<number | undefined>) => {
    const res: any = await detele(`/admin/api/v1/paper/${id}`, {}, token)
    if (res.status_code === 0) {
      data.value = data.value.filter((tem: any) => tem.id !== id.value)
      message.success('删除成功')
      changePage(paginationProps.value.current, paginationProps.value.pageSize)
      //重新刷新页面
      reload()
    }
  }

  const changePage = async (page: number, limit: number) => {
    const res: any = await get(`/admin/api/v1/paper/list?page=${page}&limit=${limit}`, token)
    console.log(res)
    paginationProps.value.current = res.pagination.page
    paginationProps.value.pageSize = res.pagination.limit
    paginationProps.value.total = res.pagination.total
    const modifiedData = res.data
    modifiedData.forEach((question: DataItem) => {
      if (question.status === 0) {
        question.status = '未发布'
      } else if (question.status === 1 || question.status === 2) {
        question.status = '已发布'
      } else if (question.status === 3) {
        question.status = '已结束'
      }
    })
    data.value = modifiedData
  }

  const postData = async (idList: number[]) => {
    const res: any = await post(
      `/admin/api/v1/paper/${chosId.value}/push`,
      {
        app_user_id: idList
      },
      token
    )
    console.log(idList)
    if (res.status_code === 0) {
      message.success('推送用户成功')
    }
  }
  return { paginationProps, onDelete, changePage, postData }
}

//列表操作
const useListEffect = () => {
  const router = useRouter()
  const openModal = ref()
  const chosId = ref<number>()
  const choosePushUsers = (id: number) => {
    openModal.value.showModal()
    chosId.value = id
  }
  const goEdit = (id: number) => {
    router.push({ name: 'paperEdit', params: { id: id } })
    console.log(id)
  }
  return { openModal, chosId, choosePushUsers, goEdit }
}
export default defineComponent({
  components: {
    ChooseUsers
  },
  setup() {
    const role = ref<string>(localStorage.getItem('role') as string)
    const { openModal, chosId, choosePushUsers, goEdit } = useListEffect()
    const { paginationProps, onDelete, postData, changePage } = useHttpEffect(chosId)
    onMounted(() => {
      changePage(1, 5)
    })
    return {
      data,
      goEdit,
      paginationProps,
      openModal,
      choosePushUsers,
      onDelete,
      postData,
      changePage,
      ChooseUsers,
      role
    }
  }
})
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  margin-bottom: 30px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: rgb(13, 102, 206);
}
.title {
  display: inline-block;
  font-size: 25px;
  font-weight: 900;
  color: #fff;
  margin: 1.7%;
  margin-left: 6%;
  letter-spacing: 20px;
}
.picture {
  width: 10%;
  margin-left: 660px;
  border-radius: 10px;
  background-color: #4c63e9;
}
.questiontitle {
  font-size: 20px;
}
</style>
